@keyframes scalesV {
  0% {
    transform: translateY(-50%) scale(1.1);
  }

  50% {
    transform: translateY(-50%) scale(0.9);
  }

  100% {
    transform: translateY(-50%) scale(1);
  }
}

.controller-container {
  @apply w-full h-full absolute left-0 top-0 cursor-pointer z-3;

  .click-to-play-or-pause {
    @apply w-full absolute left-0 top-0 outline-0 cursor-default;
    height: calc(100% - var(--video-pc-height));
  }

  &:hover {
    @keyframes scales {
      0% {
        transform: translateX(-50%) rotateY(0deg);
      }
      100% {
        transform: translateX(-50%) rotateY(180deg);
      }
    }

    .share {
      perspective: 50px;
      transform-style: preserve-3d;
      animation: scales 0.5s 8;
    }
  }

  .progress-and-controls-wrap {
    @apply w-full absolute bottom-0 left-0;
    padding: 0 60px;
    z-index: 102;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 2%, rgba(0, 0, 0, 0.8) 92%);

    &:after {
      @apply h-full absolute bottom-0 left-2/4 z-min-1;
      content: '';
      width: calc(100% + 26px);
      transform: translateX(-50%);
    }
  }

  .prev {
    @apply absolute top-2/4 h-10 w-10 bg-transparent;
    transform: translateY(-50%);
    left: 54px;

    & > img {
      @apply w-full h-full object-contain;
    }

    &:hover {
      animation: scalesV 0.3s ease;
    }
  }

  .next {
    @apply absolute top-2/4 h-10 w-10 bg-transparent;
    transform: translateY(-50%);
    right: 54px;

    & > img {
      @apply w-full h-full object-contain;
    }

    &:hover {
      animation: scalesV 0.3s ease;
    }
  }

  .backBox {
    @apply absolute left-0 top-0 w-full h-auto;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 2%, rgba(0, 0, 0, 0.9) 92%);

    .backToBox {
      @apply w-full absolute left-0 top-0 h-10 flex items-center justify-center  text-white overflow-hidden;
      padding: 0 54px;
      align-items: center !important;
      .backTo {
        @apply absolute top-2/4 h-6 w-6 bg-transparent;
        transform: translateY(-50%);
        left: 54px;
        & > img {
          @apply w-full h-full object-contain;
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .controller-container {
    .click-to-play-or-pause {
      height: calc(100% - var(--video-phone-height));
    }

    .progress-and-controls-wrap {
      @apply px-4;

      &:after {
        @apply w-screen;
      }
    }

    .prev {
      @apply h-6 w-6 left-4;
    }

    .next {
      @apply h-6 w-6 right-4;
    }

    .backBox {
      .backToBox {
        @apply py-0 px-4 justify-start;

        &.backToPhone {
          .backTo {
            @apply h-5 w-5 left-4;
          }

          .imgPhone {
            transform: rotate(90deg);
          }

          .span {
            margin-left: 26px;
          }
        }
      }
    }
  }
}
